<template>
  <div class="material-container">
    <!-- 左侧部分 -->
    <div class="left-side">
      <!-- 材料标签 -->

      
      <!-- 材料内容 -->
      <div class="material-content">
        {{ materials[0]?.content }}
      </div>



  
    </div>

    <!-- 右侧部分 -->
    <div class="right-side">
      <singleChoiceQuestion 
        :question="materials[0]?.question"
        :options="materials[0]?.options"
      />
    </div>
  </div>
</template>

<script setup>
// Verbal-RC-阅读题    RC题（示例）
import singleChoiceQuestion from './singleChoiceQuestion.vue';

const props = defineProps({
  materials: {
    type: Array,
    required: true,
    default: () => []
  }
})

// 文章部分
const materials = [
  {
  content: "直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered、reminded、and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。",
  question:{
  title: "直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered、reminded、and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。",
  options: [
    {
      value: 'A',
      label: '原文没有提到女性应该享有更多政治权利。'
    },
    {
      value: 'B',
      label: '原文没有提到女性应该享有更多政治权利。'
    },
    {
      value: 'C',
      label: '原文没有提到女性应该享有更多政治权利。'
    },
    {
      value: 'D',
      label: '原文没有提到女性应该享有更多政治权利。'
    },
    {
      value: 'E',
      label: '原文没有提到女性应该享有更多政治权利。'
    }
  ],
  selectValue:'A',
  correctAnswer: 'E'

    }
  },

]
</script>

<style scoped lang="scss">
.year-select{
  width: 160px;
  margin:10px 0px;
}
.material-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.left-side {
  flex: 1;
}

.right-side {
  flex: 1;
}

.material-tabs {
  display: flex;
  gap: 10px;
  // padding-bottom: 15px;
  // margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.tab {
  padding: 8px 16px;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
}

.tab.active {
  background-color: #3c7a89;
  color: white;
}

.material-content {
  margin-bottom: 20px;
  padding: 15px;

}

.table-container {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

select {
  margin-bottom: 15px;
}
</style>